<template>
	<view class="fault">
		<slot></slot>
		<view class="fault_tips">
			<view class="fault_tips_icon">
				<image src="/static/images/waring.png" class="fault_tips_icon_img" mode=""></image>
				<view class="fault_tips_icon_text">
					请等待
				</view>
			</view>
			<view class="fault_tips_content">
				<view class="fault_tips_content_item">
					<view class="fault_tips_content_item_label tips">
						故障提示
					</view>
					<view class="fault_tips_content_item_content">
						设备处理过氧化氢注液未完成
					</view>
				</view>
				<view class="fault_tips_content_item">
					<view class="fault_tips_content_item_label process">
						处理方法
					</view>
					<view class="fault_tips_content_item_content">
						请重新取出执行一次
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

</script>

<style lang="scss" scoped>
	.fault {

		&_tips {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&_content {
				width: calc(100% - 120px);

				.tips {
					background: #f60;

					&::before {
						background: #b70000;
					}
				}

				.process {
					background: #0bc9c9;

					&::before {
						background: #008383;
					}
				}

				&_item {
					background: var(--bg);
					padding: 8px 10px;
					margin-top: 10px;
					border-radius: 5px;
					font-size: 16px;
					display: flex;
					align-items: center;
					position: relative;
					z-index: 1;

					&_label {
						color: #fff;
						font-size: 14px;
						height: 30px;
						line-height: 30px;
						margin-left: -15px;
						padding: 0 15px;
						border-top-right-radius: 20px;
						border-bottom-right-radius: 20px;
						position: relative;
						margin-right: 10px;

						&::before {
							content: "";
							display: block;
							width: 6px;
							height: 33px;
							position: absolute;
							background: #b70000;
							clip-path: polygon(0 0%, 0 90%, 100% 100%, 100% 0);
							left: 0;
							top: 0;
							z-index: -1;
						}
					}
				}
			}

			&_icon {
				width: 100px;
				text-align: center;
				color: #f60;

				&_img {
					--w: 70px;
					width: var(--w);
					height: var(--w);
				}
			}
		}
	}
</style>